<template>
  <div class="desBox">
      <div class="desBox-Detail">
            <h2 class="desBox-Detail-title">商品详情</h2>
            <ul class="desBox-Detail-des">
                <li>颜色：花色</li>
                <li>尺码：S M L XL</li>
                <li>货号：5415</li>
                <li>裙长：中长款</li>
                <li>袖长：长袖</li>
                <li>腰型：中腰</li>
                <li>面料：其他</li>
                <li>成分含量：31%（含）-50%（含）</li>
                <li>材质：涤纶</li>
                <li>适用年龄：18-24周岁</li>
                <li>年份季节：2019年秋季</li>
                <li></li>
            </ul>
            <div class="desBox-Detail-img">
                <img src="/static/Detail/1/detailList/img_1.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_2.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_3.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_4.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_5.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_6.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_7.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_8.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_9.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_10.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_11.jpg" alt="" width="100%">
                <img src="/static/Detail/1/detailList/img_12.jpg" alt="" width="100%">
            </div>
      </div>
      <div class="desBox-Recommend">
          <h2 class="desBox-Recommend-title">热门推荐</h2>
          <div class="desBox-Recommend-list">
              <img src="/static/img_head_right/swiper_head_1.jpg" alt="" width="100%">
              <div class="desBox-Recommend-list-des"><span>￥ 21</span><span>小熊网批</span></div>
          </div>
          <div class="desBox-Recommend-list">
              <img src="/static/img_head_right/swiper_head_1.jpg" alt="" width="100%">
              <div class="desBox-Recommend-list-des"><span>￥ 21</span><span>小熊网批</span></div>
          </div>
          <div class="desBox-Recommend-list">
              <img src="/static/img_head_right/swiper_head_1.jpg" alt="" width="100%">
              <div class="desBox-Recommend-list-des"><span>￥ 21</span><span>小熊网批</span></div>
          </div>
          <div class="desBox-Recommend-list">
              <img src="/static/img_head_right/swiper_head_1.jpg" alt="" width="100%">
              <div class="desBox-Recommend-list-des"><span>￥ 21</span><span>小熊网批</span></div>
          </div>
          <div class="desBox-Recommend-list">
              <img src="/static/img_head_right/swiper_head_1.jpg" alt="" width="100%">
              <div class="desBox-Recommend-list-des"><span>￥ 21</span><span>小熊网批</span></div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'desBox'
}
</script>
<style lang="stylus" scoped>
    .desBox
        display: flex;
        position: absolute;
        top: 520px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 1154px;
        .desBox-Detail
            width: 750px;
            border: 1px solid #ccc;
            background: #fff;
            .desBox-Detail-title
                height: 40px;
                font-size: 16px;
                color: #333;
                padding: 0 30px;
                line-height: 40px;
                text-align: left;
                border-bottom: 1px solid #ccc;
                background: #f5f5f5;
            .desBox-Detail-des
                display: flex;
                flex-flow: row wrap;
                justify-content: space-around;
                align-content: space-around;
                height: 130px;
                font-size: 12px;
                color: #6c6c6c;
                border-bottom: 1px solid #ccc;
            .desBox-Detail-des>li
                width: 33%;
    .desBox-Recommend
        flex: 1;
        .desBox-Recommend-title
            margin: 0 auto;
            width: 300px;
            height: 40px;
            font-size: 22px;
            color: #212121;
            line-height: 40px;
            text-align: left;
            font-weight: 600;
        .desBox-Recommend-list
            margin: 20px auto 0;
            width: 300px;
            height: 500px;
            border: 1px solid #ccc;
            .desBox-Recommend-list-des
                display: flex;
                height: 27px;
            .desBox-Recommend-list-des>span:nth-child(1)
                flex: 1;
                width: 50%;
                font-size: 16px;
                line-height: 27px;
                color: #f03664;
            .desBox-Recommend-list-des>span:nth-child(2)
                flex: 1;
                display: inline-block;
                width: 50%;
                display: block;
                font-size: 14px;
                color: #333;
                line-height: 27px;


</style>